<template>
  <div>
    <div
      class="list"
      v-for="(item, index) in list"
      :key="item.title"
      v-show="active"
    >
      <li
        class="list_item"
        @click="disp(index)"
        :class="actives == index ? 'active' : null"
      >
        <span>{{ item.title }}</span>
        <span :class="{ tubiao: item.children }"></span>
      </li>

      <!-- 下一级 -->
      <List
        v-show="item.children && actives == index"
        :list="item.children"
        ref="list"
        :handleFinish="handleFinish"
        :selectedList="[...selectedList, { title: list[index].title }]"
      ></List>
    </div>
  </div>
</template>

<script>
export default {
  name: "List",
  props: {
    list: Array,
    handleFinish: Function,
    selectedList: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      active: false,
      actives: -1,
    };
  },
  methods: {
    dis(index) {
      this.active = index;
    },
    diss(index) {
      this.actives = index;
    },
    disp(index) {
      this.actives = index;
      if (this.list[index].children) {
        this.$refs.list.forEach((item, i) => {
          this.$refs.list[i].dis(false);
        });
        this.$refs.list[index].dis(true);
        this.$refs.list.forEach((item, i) => {
          this.$refs.list[i].diss(-1);
        });
      } else {
        this.handleFinish([...this.selectedList, { ...this.list[index] }]);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.list {
  background: #2c3a47;
  padding-left: 5vw;
  .list_item {
    background: #3c6382;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2vw 5vw;
    border-bottom: 1px #ccc solid;

    .tubiao {
      display: block;
      width: 8px;
      height: 8px;
      border-left: 2px #ccc solid;
      border-top: 2px #ccc solid;
      transform: rotate(45deg);
      transition: all 0.2s;
    }
  }
  .active {
    position: relative;
    background-color: #95a5a6;
    &::before {
      position: absolute;
      content: "";
      left: 0;
      top: 0;
      width: 5px;
      height: 100%;
      background: orange;
    }
    .tubiao {
      transform: rotate(225deg);
    }
  }

  .lists {
    padding-left: 20px;
  }
}
</style>